import { Button, Modal, Form, Input, Select, DatePicker, message } from 'antd';
import { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'umi';
import { cityApi, addApi } from '@/utils/api';

interface CityType {
  id: number;
  nm: string;
  py: string;
}

const AddModal = () => {
  const [cts, setCts] = useState<CityType[]>([]);
  const isModalVisible = useSelector((state: any) => state.city.isModalVisible);
  const dispatch = useDispatch();

  const [form] = Form.useForm();

  const [values, setValues] = useState<any>({
    admin: 'abc',
  });

  useEffect(() => {
    (async () => {
      const res = await cityApi();
      setCts(res.cts);
    })();
  }, []);

  const handleOk = () => {
    // dispatch({
    //   type: 'city/close',
    // });
    // console.log(form.getFieldsValue());
    form
      .validateFields()
      .then(async (res) => {
        // {
        //   admin: "志sang"
        //   city: "深圳"
        //   handleTime: 1657157583248
        //   openTime: 1656898378356
        //   operating: "2"
        //   useCar: "1"
        // }
        // console.log({
        //   ...res,
        //   openTime: new Date(res.time).getTime(),
        //   handleTime: new Date().getTime(),
        // });
        const result = await addApi({
          ...res,
          openTime: new Date(res.time).getTime(),
          handleTime: new Date().getTime(),
        });
        if (result.status === 0) {
          dispatch({
            type: 'city/close',
          });
          message.success('This is a success message');
          dispatch({
            type: 'city/getTableDataAsync',
            payload: {},
          });
          form.resetFields();
        }
      })
      .catch((err) => {
        return false;
      });
  };

  const handleCancel = () => {
    dispatch({
      type: 'city/close',
    });
    form.resetFields();
    setValues({
      admin: 'def',
    });

    // form.setFieldsValue({
    //   admin: 'def',
    // });
  };
  return (
    <Modal
      title="添加城市"
      visible={isModalVisible}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        autoComplete="off"
        form={form}
        initialValues={{ admin: 'abc' }}
      >
        <Form.Item
          label="城市"
          name="city"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Select allowClear>
            {cts.map((item) => {
              return (
                <Select.Option value={item.nm} key={item.id}>
                  {item.nm}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>

        <Form.Item
          label="用车模式"
          name="useCar"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Select allowClear>
            <Select.Option value="1">禁停区</Select.Option>
            <Select.Option value="2">停车点</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item
          label="运营模式"
          name="operating"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Select allowClear>
            <Select.Option value="1">加盟</Select.Option>
            <Select.Option value="2">自营</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item
          label="管理员"
          name="admin"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="开通时间"
          name="time"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <DatePicker />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AddModal;
